<script setup>
import { customRef } from 'vue';

// 相当于自定义属性的get和set属性
/*
函数跟一个回调函数，回调函数有两个参数
    1. track：当我们获取数据的时候，告诉vue追踪数据
    2. trigger：当我们设置数据的时候，告诉vue来进行界面的更新

对于某个频繁更新的数据进行节流,每隔一段时间来更新数据
*/

const useDebounceRef = (value, delay) => {
    let timeoutId;
    return customRef((track, trigger) => ({
        get() {
            track() // 获取时追踪数据
            return value
        },
        set(newValue) {
            clearTimeout(timeoutId)
            // setTimeout 会放到队列中执行 ，clearTimeout会从队列中清除
            timeoutId = setTimeout(() => {
                value = newValue
                trigger() // 修改之后进行视图更新
            }, delay)
        }
    }))
}

const keyword = useDebounceRef('', 3000)
</script>

<template>
    <h2>customRef</h2>
    <input v-model="keyword" type="text">
    <div>{{ keyword }}</div>
</template>

